<ui:composition template="template/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<ui:param name="panelTitle" value="Agregar modelo de vehiculo" />

	<ui:define name="panelContent">
		<h:form>
			<p:growl id="messages" />

			<div align="center">
				<h:panelGrid columns="1" width="60%">
					<p:panel>
						<h:panelGrid id="displayView" columns="3" cellpadding="8"
							styleClass="admin-input-text">

							<h:outputText for="marcaVehiculo" value="Marca: " />
							<p:selectOneMenu id="marcas" style="width:200px"
								value="#{modeloVehiculoMB.marca}" effect="fade">
								<f:selectItem itemLabel="Seleccione una marca"
									itemValue="#{null}" />
								<f:selectItems value="#{modeloVehiculoMB.marcaVehiculoList}"
									var="marca" itemValue="#{marca}" itemLabel="#{marca.nombre}" />
								<f:converter converterId="marcaVehiculoConverter" />

							</p:selectOneMenu>
							<p:message id="marcaMsg" for="marcas" display="icon" />

							<h:outputLabel for="nombre" value="Nombre: " />
							<p:inputText id="nombre" value="#{modeloVehiculoMB.nombreModelo}"
								required="true" requiredMessage="Campo nombre obligatorio"
								maxlength="40">
								<f:validateLength minimum="1" />
								<p:ajax event="blur" update="nombreMsg" />
							</p:inputText>
							<p:message id="nombreMsg" for="nombre" display="icon" />

							<h:outputLabel for="descripcion" value="Descripcion " />
							<p:inputText id="descripcion"
								value="#{modeloVehiculoMB.descripcionModelo}" required="true"
								requiredMessage="Campo descripción obligatorio" maxlength="40">
								<f:validateLength minimum="1" />
								<p:ajax event="blur" update="descripcionMsg" />
							</p:inputText>
							<p:message id="descripcionMsg" for="descripcion" display="icon" />

							<h:outputText for="categoriaVehiculo" value="Categoria: " />
							<p:selectOneMenu id="categorias" style="width:215px"
								value="#{modeloVehiculoMB.categoriaVehiculo}" effect="fade">
								<f:selectItem itemLabel="Seleccione una categoria"
									itemValue="#{null}" />
								<f:selectItems value="#{modeloVehiculoMB.categoriaVehiculoList}"
									var="categoria" itemValue="#{categoria}"
									itemLabel="#{categoria.nombre}" />
								<f:converter converterId="categoriaVehiculoConverter" />
							</p:selectOneMenu>
							<p:message id="categoriasMsg" for="categorias" display="icon" />

						</h:panelGrid>
					</p:panel>
					<p:column>
						<div align="center">
							<p:commandButton id="addModelo" value="Registrar nuevo modelo"
								action="#{modeloVehiculoMB.addModeloVehiculo}" ajax="false" />
							<p:commandButton id="reset" value="Cancelar" immediate="true"
								action="/admin/modelovehiculolist.html?faces-redirect=true"
								ajax="false" style="margin-right:15px" />
						</div>
					</p:column>
				</h:panelGrid>
			</div>

		</h:form>
	</ui:define>
</ui:composition>